<template>
	<div class="index-section">
		<van-pull-refresh
			v-model="isRefreshLoading"
			@refresh="onRefresh"
		>
		<van-list
			v-model="listLoading"
			:finished="listLoadFinished"
			finished-text="这就是我的底线"
			@load="onLoad"
		>
			<div class="index-inner">
				<div class="banner-section">
					<div class="banner-inner">
						<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
							<van-swipe-item
								v-for="item in bannerList"
								:key="item.picId"
							>
								<div class="banner-item"><img :src="`${imgBaseUrl}${item.picUrl}`" alt=""></div>
							</van-swipe-item>
						</van-swipe>
					</div>
				</div>
				<div class="tab-links">
					<div class="link-item" @click="handleShowPhone('help')">
						<img src="../../assets/images/icon-index-link01@2x.png" alt="">
						<span>求助热线</span>
					</div>
					<div class="link-item" @click="handleShowPhone('ask')">
						<img src="../../assets/images/icon-index-link02@2x.png" alt="">
						<span>咨询热线</span>
					</div>
					<div class="link-item" @click="handleNoticeItemClick(volunteerNotice)">
						<img src="../../assets/images/icon-index-link03@2x.png" alt="">
						<span>志愿招募</span>
					</div>
				</div>
				<div class="notice-bar">
					<van-notice-bar
						class="my-notice-bar"
						color="#333"
						background="#fff"
					>
						<div class="notice-content">
							<span 
								v-for="(item,index) in noticeTxtArr"
								:key="index"
							>{{item}}</span>
						</div>
						<template #left-icon>
							<div class="notice-icon">
								<img src="../../assets/images/icon-notice@2x.png" alt="">
							</div>
						</template>
					</van-notice-bar>
				</div>
				<div class="notice-list-section">
					<div class="title">
						<span><b>社区公告</b></span>
					</div>
					<div class="notice-list" v-if="noticeList.length">
						<div class="notice-item" 
							v-for="item in noticeList" 
							:key="item.noticeId"
							@click="handleNoticeItemClick(item)"
						>
							<div class="post">
								<img :src="`${imgBaseUrl}${item.noticePic}`" alt="" />
								<span>{{item.noticeTitle}}</span>
							</div>
							<div class="detail">
								<div class="detail-item">
									<img src="../../assets/images/icon-user@2x.png" alt="">
									<span>{{item.creator||"--"}}</span>
								</div>
								<div class="detail-item">
									<img src="../../assets/images/icon-date@2x.png" alt="">
									<span>{{item.createtime}}</span>
								</div>
							</div>
						</div>
					</div>
					<van-empty v-else description="天下太平,没啥事要通知" />
				</div>
			</div>
		</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
import {
	mapState
} from 'vuex'
import {
	getBannerList,
	getNoticeList
} from '../../request/api'
export default {
	components: {},
	data() {
		return {
			imgBaseUrl: process.env.VUE_APP_IMG_URL,
			noticePagination:{
				page:1,
				pageSize:10,
				pages:0,
				total:0
			},
			isRefreshLoading: false, //下拉刷新
			listLoading: false, //列表下拉刷新,是否正在加载
			listLoadFinished: false,
			volunteerNotice:{
				type:"zhiyuanzhezhaomu",
				noticeTitle: "志愿者招募",
				creator: "浑南区白塔社区",
				createtime: "2022/10/11  16:58",
			}
		}
	},
	computed: {
		...mapState({
			bannerList:state=>state.index.bannerList,
			noticeList:state=>state.index.noticeList,
		}),
		noticeTxtArr:function(){
			return this.noticeList.map((item)=>{
				return item.noticeTitle
			})
		},
	},
	mounted(){
		this.handleGetBannerList();
		this.handleGetNoticeList({
				page:1,
				pageSize:this.noticePagination.pageSize
			})
	},
	methods: {
		// 上拉加载公告列表
		onLoad(){
			// 首页数据不适用onload加载，使用手动加载，防止数据过少反复加载
			if(this.noticePagination.page === 1) return
			this.handleGetNoticeList({
				page:this.noticePagination.page+1,
				pageSize:this.noticePagination.pageSize
			})
		},
		// 下拉刷新
		async onRefresh() {
      await this.handleGetBannerList();
			await this.handleGetNoticeList({
				page:1,
				pageSize:this.noticePagination.pageSize
			})
			this.isRefreshLoading = false
    },
		// 热线电话
		handleShowPhone(type){
			if(type==="help"){
				this.$dialog.alert({
					title:"求助热线",
					message:"024-00000000",
					confirmButtonColor:"#209cff"
				})
			}
			if(type==="ask"){
				this.$dialog.alert({
					title:"咨询热线",
					message:"024-00000000",
					confirmButtonColor:"#209cff"
				})
			}
		},
		// 公告点击
		handleNoticeItemClick(item){
			this.$store.commit("index/setNoticeDetail",item)
			this.$router.push({
				name:"noticeDetail"
			})
		},
		// 获取banner
		async handleGetBannerList(){
			const res = await getBannerList()
			if(res){
				this.$store.commit("index/setBannerList",res.data.data)
			}
		},
		async handleGetNoticeList(pagination){
			if(pagination.page===1){
				this.listLoadFinished = false
			}
			if(this.listLoadFinished) return
			const res = await getNoticeList({
				...pagination
			})
			if(res){
				const resData = res.data

				this.noticePagination.page = resData.page
				this.noticePagination.pages = resData.pages
				this.noticePagination.total = resData.total
				
				this.$store.commit("index/setNoticeList",{
					type:resData.page===1?"initial":"add", //初始化数据和添加数据
					data:resData.data
				})

				this.listLoading = false;
				
				// 已加载全部数据
				this.listLoadFinished = (resData.page === resData.pages)
			}
		}
	}
}
</script>

<style scoped lang="scss">
@import "../../assets/style/variable.scss";
.index-section{
	height: 100%;
	background-color: $bg-gray;
	overflow: auto;
	.index-inner{
		width: 690px;
		margin: 0 auto;
	}
	.banner-section{
		padding: 30px 0;
		.banner-inner{
			height: 100%;
		}
		.my-swipe{
			height: 300px;
			.banner-item{
				height: 100%;
				width: 100%;
				border-radius: 10px;
				overflow: hidden;
				background: #ebebeb;
				img{
					display: block;
					height: 100%;
					width: 100%
				}
			}
		}
	}
	.tab-links{
		@include flexCenter;
		justify-content: space-around;
		.link-item{
			@include flexCenter;
			flex-direction: column;
			img{
				display: block;
				width: 130px;
			}
			span{
				font-size: 28px;
			}
		}
	}
	.notice-bar{
		margin: 40px 0;
		border-radius: 10px;
		overflow: hidden;
		.notice-icon{
			padding-right: 30px;
			position: relative;
			img{
				display: block;
				width: 40px;
			}
			&::after{
				content: "";
				width: 2px;
				height: 30px;
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translate(0,-50%);
				background-color: #D7D7D7;
			}
		}
		.notice-content{
			span{
				margin-right: 50px;
			}
		}
	}
	.notice-list-section{
		.title{
			margin-bottom: 20px;
			span{
				position: relative;
				b{
					font-size: 28px;
					font-weight: bold;
					position: relative;
					z-index: 1;
				}
				&::after{
					content:"";
					width: 100%;
					height: 8px;
					background: linear-gradient(to right,rgba(50, 124, 254, .2),rgba(50, 124, 254, 1));
					position: absolute;
					bottom: 2px;
					left: 0;
					z-index: 0;
				}
			}
		}
		.notice-list{
			@include flexCenter;
			// flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-between;
			.notice-item{
				width: 336px;
				border-radius: 10px;
				overflow: hidden;
				margin-bottom: 16px;
				.post{
					width: 100%;
					height: 210px;
					position: relative;
					img{
						display: block;
						width: 100%;
						height: 100%;
					}
					span{
						color: #fff;
						font-size: 28px;
						position: absolute;
						left: 10px;
						bottom: 10px;
						width: calc(100% - 20px);
						@include textEllipsis;
					}
				}
				.detail{
					background: #fff;
					padding: 20px 25px;
					.detail-item{
						height: 32px;
						@include flexCenter;
						justify-content: flex-start;
						margin-bottom: 10px;
						img{
							display: block;
							width: 20px;
							margin-right: 10px;
						}
						span{
							font-size: 22px;
						}
						&:last-child{
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
}
</style>